<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <script type="text/javascript" src="{{asset('/js/home/echarts.min.js')}}" ></script>
    <title>饮食分析</title>
    <link rel="stylesheet" type="text/css" href="{{asset('/css/home/share.css')}}" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<!--pages/Health/analyse/analyse.wxml-->

<div id="capture">
    <div class='pie'>
        <div id="main" style="width: 310px;height:200px; margin: 0 auto;"></div>
    </div>
    <div class='analyse_container'>
        <div class='analyse_title'>
            <div class='title'>三大营养素供能比</div>
        </div>
        <div class='analyse_padding'>
            <div class='analyse_li xian'>
                <div class="analyse_left">
                    <div class='yanse  color1'></div>
                    <text class='text'>碳水化合物</text></div>
                <div class='analyse_right'>
                    <div class="num">
                        <div class='number'>{{$request['carbohydrate_weight']}} <text>g</text></div>
                        <div class='sheru'>推荐摄入：<span class="colortext1">{{$request['min_carbohydrate_weight']}} - {{$request['max_carbohydrate_weight']}}g</span></div></div>
                    <div class="analyse_jiantou">
                        @switch($request['carbohydrate_compare'])
                            @case(-1)
                            <img src="{{asset('/images/home/di.png')}}"/>
                            @break
                            @case(0)
                            <img src="{{asset('/images/home/gou.png')}}"/>
                            @break
                            @case(1)
                            <img src="{{asset('/images/home/height.png')}}"/>
                            @break
                            @default
                            ""
                        @endswitch

                    </div>
                </div>

            </div>
            <!--脂肪-->
            <div class='analyse_li xian'>
                <div class="analyse_left">
                    <div class='yanse  color2'></div>
                    <text class='text'>脂肪</text></div>
                <div class='analyse_right'>
                    <div class="num">
                        <div class='number'>{{$request['fat_weight']}} <text>g</text></div>
                        <div class='sheru'>推荐摄入：<span class="colortext2">{{$request['min_fat_weight']}} - {{$request['max_fat_weight']}}g</span></div></div>
                    <div class="analyse_jiantou">
                        @switch($request['fat_compare'])
                            @case(-1)
                            <img src="{{asset('/images/home/di.png')}}"/>
                            @break
                            @case(0)
                            <img src="{{asset('/images/home/gou.png')}}"/>
                            @break
                            @case(1)
                            <img src="{{asset('/images/home/height.png')}}"/>
                            @break
                            @default
                            ""
                        @endswitch
                    </div>
                </div>

            </div>
            <!--蛋白质-->
            <div class='analyse_li'>
                <div class="analyse_left">
                    <div class='yanse  color3'></div>
                    <text class='text'>蛋白质</text></div>
                <div class='analyse_right'>
                    <div class="num">
                        <div class='number'>{{$request['protein_weight']}} <text>g</text></div>
                        <div class='sheru'>推荐摄入：<span class="colortext3">{{$request['min_protein_weight']}} - {{$request['max_protein_weight']}}g</span></div></div>
                    <div class="analyse_jiantou">
                        @switch($request['protein_compare'])
                            @case(-1)
                            <img src="{{asset('/images/home/di.png')}}"/>
                            @break
                            @case(0)
                            <img src="{{asset('/images/home/gou.png')}}"/>
                            @break
                            @case(1)
                            <img src="{{asset('/images/home/height.png')}}"/>
                            @break
                            @default
                            ""
                        @endswitch
                    </div>
                </div>

            </div>

        </div>
    </div>

    <!--综合分析-->
    <div class='analyse_con'>
        <div class='analyse_title'>
            <div class='title2'>综合分析</div>
        </div>
        <div class='analyse_padd '>
            @if(empty($request['fat_compare']) && empty($request['protein_compare']) && empty($request['carbohydrate_compare']))
                <p class="text">综合分析，您的饮食均衡，请继续保持</p>
            @else
                @if(!empty($request['carbohydrate_compare']))
                    <div class="xian">
                        <div class='yanse  color1'></div>
                        <text class='text'>碳水化合物—摄入@if($request['carbohydrate_compare'] >0)过多@else过少@endif</text>
                        <p class="text_text">{{$request['carbohydrate_analyse']}}</p>
                    </div>
                @endif
                    @if(!empty($request['fat_compare']))
                        <div class="xian">
                            <div class='yanse  color2'></div>
                            <text class='text'>脂肪—摄入@if($request['fat_compare'] >0)过多@else过少@endif</text>
                            <p class="text_text">{{$request['fat_analyse']}}</p>
                        </div>
                    @endif
                    @if(!empty($request['protein_compare']))
                        <div class="xian">
                            <div class='yanse  color3'></div>
                            <text class='text'>蛋白质—摄入@if($request['protein_compare'] >0)过多@else过少@endif</text>
                            <p class="text_text">{{$request['protein_analyse']}}</p>
                        </div>
                    @endif
            @endif
        </div>
    </div>
    <footer class="footer">
        <div class="btns" id="creat"data-toggle="modal" data-target="#myModal" >分享</div>
    </footer>
</div>
<!--<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>-->
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true" style="padding-right: 20px; padding-top: 10px;">×
            </button>
            <div class="title_title">长按图片分享给好友</div>
            <img id="down_img" src="{{asset('/images/home/X-loading2.gif')}}"/>
            <img id="down_button" src="#"  style="width: 100%; display: none"/>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<script src="{{asset('/js/home/html2canvas.min.js')}}"></script>
<script type="text/javascript" src="{{asset('/js/home/jquery-1.10.1.min.js')}}" ></script>
<script>
        //pie图
        var request = @json($request);
        echarts.init(document.getElementById('main')).setOption({

            series: {
                type: 'pie',
                color: ['#f7845c', '#f75c76', '#6cc49d'],
                labelLine:{
                    normal:{
                        show:true
                    }
                },
                label : {
                    normal : {
                        textStyle : {
                            fontWeight : 'normal',
                            fontSize : 12
                        }
                    }
                },
                data: [
                    {name: request.carbohydrate_rate + '%碳水', value:request.carbohydrate_rate},
                    {name: request.fat_rate + '%脂肪', value:request.fat_rate},
                    {name: request.protein_rate + '%蛋白质', value:request.protein_rate}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }

                }

            }

        });
        $("#creat").click(function(){
            $(".footer").hide();
            html2canvas(document.body).then(function(canvas) {
                dataURL =canvas.toDataURL("image/png");
                $("#down_img").css("display","none");
                $("#down_button").css("display","block");
                $('#down_button').attr( 'src' ,  dataURL ) ;
            });
        });
        $(".close").click(function(){
            $(".footer").show();
        })
        $("#myModal").click(function(){
            $(".footer").show();
        })

</script>
</body>

</html>